import { useEffect, useState } from "react";
import { apps } from "../../defines/allapps";
import "./index.css";
export default function MultipleCanvasSample() {
  const appName = "MultipleCanvas";
  const [currentApp, setCurrentApp] = useState(apps.find((a) => a.name === appName));
  useEffect(() => {
    if (!currentApp) {
      console.error(`App with name ${appName} not found`);
      return;
    }
    currentApp.instance.run();
  });
  return (
    <div className="multiple-canvas-container">
        {currentApp && (
          <div
            className="description"
            dangerouslySetInnerHTML={{ __html: currentApp.instance.description ?? "" }}
          ></div>
        )}
        <div id="outer"></div>
    </div>
  );
}